<template>
	<view class="container">
		<z-paging ref="paging" v-model="dataList" @query="queryList" :auto="false">
			<view slot="top">
				<view class="search-header">
					<view class="search-bar-box">
						<view class="search-bar">
							<u-icon name="search" size="20" color="#999999"></u-icon>
							<input type="text" placeholder="请输入关键字搜索" placeholder-class="placeholder" v-model="keywords"
								@input="$u.throttle(refreshList, 1000)" />
							<u-icon name="plus-circle" size="20" color="#FE4F04" @click="navigatorToAdd"
								v-if="showAdd"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="building-list">
				<!-- @click="selectedId = item.id" -->
				<view class="building-item" v-for="(item, index) in dataList" :key="index"
					@click="confirmSelectData(item)">
					<view :class="selectedId === item.id?'building-name active':'building-name'">{{ item.name }}
					</view>
					<u-icon name="checkbox-mark" color="#FE4F04" size="28"
						v-if="pageModel=='list'&&selectedId===item.id"></u-icon>
					<view v-if="pageModel=='edit'" @click="deleteZone(item)" style="font-size: 28rpx;color:#FE4F04;">删除</view>
				</view>
			</view>

			<view slot="bottom">
				<view class="safe-bottom page-bottom">
					<view class="action-btn-group">
						<view class="action-btn1" @click="editModelHandle">{{pageModel == 'list'?'编辑模式':'退出编辑'}} </view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		addZone,
		deleteZone,
		getZoneList
	} from '@/api/landlord'
	export default {
		data() {
			return {
				showAdd: true,
				keywords: '',
				selectedId: null, // 选中的地址ID
				dataList: [],
				pageModel: 'list'
			}
		},
		onLoad(options) {
			if (options && options.showAdd === 'false') {
				this.showAdd = false;
			}
		},
		onShow() {
			this.refreshList()
		},
		methods: {
			deleteZone(item) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否删除区域',
					success: function(res) {
						if (res.confirm) {
							deleteZone({
								id: item.id
							}).then(ress => {
								that.$Toast('删除成功')
								that.refreshList()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			editModelHandle() {
				if (this.pageModel == 'list') {
					this.selectedId = null
					this.pageModel = 'edit'
				} else {
					this.selectedId = null
					this.pageModel = 'list'
				}
			},
			navigatorToAdd() {
				let that = this
				uni.showModal({
					title: '提示',
					placeholderText: '请输入区域名称',
					editable: true,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							if (res.content) {
								that.addZone(res.content)
							} else {
								that.$Toast('请输入区域名称')
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			addZone(content) {
				addZone({
					name: content
				}).then(res => {
					this.$Toast('添加成功')
					this.refreshList()
				})
			},
			refreshList() {
				if (this.$refs.paging) {
					this.$refs.paging.refresh();
				}
			},
			confirmSelectData(item) {
				if (this.pageModel == 'edit') return false
				let that = this
				uni.$u.throttle(() => {
					that.selectedId = item.id
					uni.$emit('selectZone', item);
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 200)
				}, 3000)
			},
			queryList(pageNo, pageSize) {
				getZoneList({
					kw: this.keywords,
					page: pageNo,
					page_size: pageSize
				}).then(res => {
					console.log(res)
					this.$refs.paging.complete(res.data.data);
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #F5F6F7;
	}

	/* 底部操作菜单 */
	.page-bottom {
		position: fixed;
		width: 100%;
		bottom: 0rpx;
		z-index: 95;
		display: flex;
		align-items: center;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 20rpx;
		box-sizing: border-box;

		button {
			margin: unset;
			padding: unset;
			background-color: #ffffff;
		}

		button::after {
			border: none;
		}

		.icon-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 22rpx;
			color: #333333;
			margin-right: 48rpx;

			.label {
				font-size: 22rpx;
				color: #333333;
				margin-top: 6rpx;
			}
		}

		.action-btn-group {
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			flex: 1;

			.action-btn {
				width: 100%;
				height: 88rpx;
				background: #FE4F04;
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(254, 79, 4, 0.5);
				font-weight: bold;
				font-size: 30rpx;
				color: #ffffff;
				line-height: 88rpx;
				text-align: center;
				border-radius: 44rpx
			}

			.action-btn1,
			.action-btn2 {
				width: 100%;
				height: 88rpx;
				font-weight: bold;
				font-size: 30rpx;
				line-height: 88rpx;
				text-align: center;
				border-radius: 44rpx;
				border: 2rpx solid #FE4F04;
			}

			.action-btn1 {
				color: #FE4F04;
				background: #fff;
				margin-right: 10rpx;
			}

			.action-btn2 {
				color: #fff;
				background: #FE4F04;
				margin-left: 10rpx;
			}
		}
	}

	.search-header {
		flex-shrink: 0;
		padding: 20rpx 30rpx;

		.search-bar-box {
			display: flex;
			align-items: center;

			.search-bar {
				flex: 1;
				border-radius: 36rpx;
				display: flex;
				align-items: center;
				background: #FFFFFF;
				padding: 16rpx 24rpx;
			}

			.search-bar input {
				flex: 1;
				margin: 0 20rpx;
				font-size: 14px;
			}

			.placeholder {
				color: #999999;
			}
		}
	}

	.building-list {
		margin: 0 32rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.01);
		border-radius: 16rpx;

		.building-item {
			display: flex;
			padding: 20rpx 40rpx;
			align-items: center;
			justify-content: space-between;
			min-height: 60rpx;

			.building-name {
				flex: 1;
				font-size: 28rpx;
				color: #666666;
			}

			.active {
				color: #FE4F04;
			}
		}
	}
</style>